<template>
  <el-skeleton :loading="Isloading" :rows="5" animated>
    <div class="box">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/questionBank' }">题库管理</el-breadcrumb-item>
          <el-breadcrumb-item><a>题库详情</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- :disabled="disabled" -->
      <!-- 题库详情 -->
      <div v-loading="VLoading" v-if="Isdisplay == 0" class="describe">
        <el-descriptions class="margin-top" :column="3" title="题库详情" border>
          <template #extra>
            <el-button type="primary" @click="update">修改</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库名</div>
            </template>
            {{ bankname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库标签</div>
            </template>
            <el-select v-model="select" placeholder="">
              <el-option label=".Net" value=".Net" />
              <el-option label="Java" value="Java" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库容量</div>
            </template>
            {{ num }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库等级</div>
            </template>
            {{ lv }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">描述</div>
            </template>
            {{ describe }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 题库详情  -->
      <!-- 修改题库 -->
      <div v-loading="VLoading" v-if="Isdisplay == 1" class="describe">
        <el-descriptions class="margin-top" :column="3" title="修改题库" border>
          <template #extra>
            <el-popconfirm title="确认要修改吗？" @confirm="confirmEvent">
              <template #reference>
                <el-button type="primary">保存</el-button>
              </template>
            </el-popconfirm>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库名</div>
            </template>
            <el-input v-model="bankname" placeholder="请输入题库名" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库类型</div>
            </template>
            <el-select v-model="select" placeholder="">
              <el-option label=".Net" value=".Net" />
              <el-option label="Java" value="Java" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库容量</div>
            </template>
            <el-input-number v-model="num" :min="1" :max="100000" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">题库等级</div>
            </template>
            <el-input-number v-model="lv" :min="1" :max="100000" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">描述</div>
            </template>
            <el-input v-model="describe" :rows="2" type="textarea" placeholder="Please input" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 修改题库 -->
      <div class="table">
        <div class="tablehead">
          <span>题库试题</span>
          <div class="bankname">请输入试题名：</div>

          <div class="input">
            <el-input v-model="key" class="w-50 m-2" placeholder="请输入想要查找的试题名" @change="search" />
          </div>
          <div class="tablebtn">
            <el-button plain type="primary" style="margin-left: 16px" @click="drawers">
              手动添加
            </el-button>
            <el-button type="success" plain style="margin-left: 16px" @click="drawer2 = true">
              自动添加
            </el-button>

            <!-- 手动   抽屉 -->
            <el-drawer v-model="drawer" title="I am the title" :with-header="false">
              <span style="font-size: 30px">试题库</span>
              <el-scrollbar height="750px">
                <div v-loading="VLoadings" class="drawer">
                  <div v-for="item in questions" :key="item.qid" class="demo-collapse">
                    <el-tag>{{ item.qlable }}</el-tag>
                    <el-collapse v-model="activeName" :accordion="true">
                      <el-checkbox-group v-model="qid">
                        <el-checkbox :label="item.qid" size="large">{{ item.qcontent }}</el-checkbox>
                      </el-checkbox-group>
                      <el-collapse-item :name="item.qid">
                        <template v-for="(item3, index) in item.opiton" :key="index">
                          <div v-if="item3.oisRight == 1">
                            <span>正确答案：{{ item3.ocontent }}</span>
                          </div>
                        </template>
                        <el-collapse accordion v-for="(item2, index) in item.opiton" :key="item2.index">
                          <div>
                            <span>{{ index + 1 + " . " + item2.ocontent }}</span>
                          </div>
                        </el-collapse>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
              </el-scrollbar>
              <div class="boxbtn">
                <el-button @click="drawer = false">取消</el-button>
                <el-button type="primary" @click="testadd">保存</el-button>
              </div>
            </el-drawer>
            <!-- 手动   抽屉 -->

            <!-- 自动   抽屉 -->
            <el-drawer v-model="drawer2" title="I am the title" :with-header="false">
              <span style="font-size: 30px">请选择</span>
              <div class="drawer2">
                <div>
                  <el-tag style="font-size: 15px; margin-bottom: 15px">题库类型：</el-tag>
                  <div>
                    <el-from>
                      <el-form-item>
                        <el-select v-model="zlabel">
                          <el-option label=".Net" value=".Net" />
                          <el-option label="Java" value="Java" />
                        </el-select>
                      </el-form-item>
                    </el-from>
                  </div>
                </div>
                <div>
                  <el-tag style="font-size: 15px; margin-bottom: 15px">题库等级：</el-tag>
                  <div>
                    <el-input-number v-model="banklv" :min="1" :max="10" />
                  </div>
                </div>

                <div>
                  <el-tag style="font-size: 15px; margin-bottom: 15px">生成数量：</el-tag>
                  <div>
                    <el-input-number v-model="qbcount" :min="1" :max="100000" />
                  </div>
                </div>
              </div>
              <div class="boxbtn2">
                <el-button @click="drawer2 = false">取消</el-button>
                <el-button type="primary" @click="Ztestadd">开始</el-button>
              </div>
            </el-drawer>
            <!-- 自动   抽屉 -->
          </div>
        </div>
        <el-table border v-loading="VLoading" :data="tableData" style="width: 100%">
          <el-table-column prop="qcontent" label="题干" width="180" />
          <el-table-column type="expand">
            <template #default="props">
              <el-table :data="props.row.opiton">
                <el-table-column label="选项" prop="ocontent" />
                <el-table-column label="答案">
                  <template #default="scope">
                    <el-tag :type="scope.row.oisRight == 0 ? 'danger' : 'primary'" disable-transitions>
                      {{ scope.row.oisRight == 0 ? "错误" : "正确" }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="qexplain" label="描述" width="180" />
          <el-table-column label="等级" width="100">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.qlv }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.qisPublish === 0 ? 'warning' : 'success'" disable-transitions>{{
                  scope.row.qisPublish === 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.qisBan === 0 ? 'success' : 'warning'" disable-transitions>
                {{ scope.row.qisBan === 0 ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240">
            <template #default="scope">
              <el-button type="danger" @click="Delete(scope)" size="small"> 移除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </el-skeleton>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { DetaliBank } from "@/utils/Exam/bank/detalibank";
import { ElMessage } from "element-plus";
import { QuestionBank } from "@/api/Product/exaam";
import router from "@/router";

const _exam = new QuestionBank();

export default defineComponent({
  setup() {
    const data = reactive<DetaliBank>({
      activeName: 1,
      tableData: [],
      questions: [],
      drawer: false,
      drawer2: false,
      Isdisplay: 0,
      Isloading: true,
      bankname: "Java题库",
      num: 1000,
      lv: 3,
      key: "",
      describe: "",
      select: "Java",
      banklv: 0,
      qbid: "",
      pages: {
        page: 1,
        limit: 5,
        total: 10,
      },
      disabled: false,
      VLoading: false,
      qid: [],
      questiondetalis: [],
      VLoadings: false,
      zlabel: ".Net",
      qbcount: 0
    });
    const methods = {
      GetEohcQuestionBank() {
        data.VLoading = true;
        _exam.GetEchoQuestionBank({
          qbid: data.qbid,
          page: data.pages.page,
          limit: data.pages.limit,
          key: data.key,
        }).then(res => {
          if (res.code === 0) {
            data.VLoading = false;
            data.Isloading = false;
            data.disabled = res.data.data.qbispublic == 0 ? data.disabled = false : data.disabled = true
            data.bankname = res.data.data.qbname,
              data.num = res.data.data.qbcount,
              data.lv = res.data.data.qblv,
              data.describe = res.data.data.qbexplain,
              data.select = res.data.data.qblabel
            data.tableData = res.data.data.question
            data.pages.total = res.data.total
          }
        })
      },
      //修改
      update() {
        data.Isdisplay = 1;
      },
      //保存
      confirmEvent() {
        data.VLoading = true;
        let dto = {
          qbid: data.qbid,
          qbname: data.bankname,
          qbexplain: data.describe,
          qbcount: data.num,
          qblabel: data.select,
          qblv: data.lv
        };
        _exam.UpdateQuestionBank(dto).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            data.Isdisplay = 0
            router.push("/questionBank")
          }
        })
      },
      //手动添加试题
      testadd() {
        data.qid.forEach((e: any) => {
          data.questiondetalis.push({ qid: e });
        })
        let dto = {
          qbdid: data.qbid,
          questiondetali: data.questiondetalis
        }
        _exam.ArtificialJoinQuestion(dto).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            methods.GetEohcQuestionBank();
            data.drawer = false;
          } else {
            ElMessage.error(res.message)
          }
        })
      },
      //自动添加试题
      Ztestadd() {
        _exam.ConstituteJoinQuestion({
          qbid: data.qbid,
          qblabel: data.zlabel,
          qblv: data.banklv,
          qbcount: data.qbcount
        }).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            data.drawer = false;
            methods.GetEohcQuestionBank();

          } else {
            ElMessage.error(res.message)
          }
        })
      },
      Delete(val: any) {
        data.VLoading=true;
        let questiondetali = [];
        questiondetali.push({ qid: val.row.qid });
        let dto = {
          qbdid: data.qbid,
          questiondetali: questiondetali
        }
        _exam.RemoveQuestion(dto).then((res: any) => {
          if (res.code === 0) {
            data.VLoading=false;
            ElMessage.success(res.message);
            methods.GetEohcQuestionBank();
          } else {
            ElMessage.error(res.message);
          }
        })
      },
      drawers() {
        data.VLoadings = true
        data.drawer = true
        _exam.GetQuestion({ qbid: data.qbid }).then((res: any) => {
          if (res.code === 0) {
            data.VLoadings = false
            data.questions = res.data
          }
        })
      },
      search(val: any) {
        data.key = val;
        methods.GetEohcQuestionBank();
      },
      handleSizeChange(val: number) {
        data.pages.limit = val;
        methods.GetEohcQuestionBank();
      },
      handleCurrentChange(val: number) {
        data.pages.page = val;
        methods.GetEohcQuestionBank();
      },
    };
    onMounted(() => {
      data.qbid = (router.currentRoute.value.params.id).toString();
      setTimeout(() => {
        methods.GetEohcQuestionBank();
      }, 100);

    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
/* .box {
  background-color: azure;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
} */
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.table {
  width: 94%;
  padding: 20px;
  margin: 15px;
  margin-top: 40px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.tablehead {
  padding: 10px;
  margin-bottom: 5px;
}

.tablebtn {
  float: right;
}

.paging {
  margin: 20px;
}

.drawer {
  width: 94%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.boxbtn {
  position: absolute;
  width: 90%;
  top: 85%;
  left: 5%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
}

.boxbtn>.el-button {
  margin: 1%;
  width: 30%;
}

.drawer2 {
  width: 94%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.boxbtn2 {
  position: absolute;
  width: 90%;
  top: 85%;
  left: 5%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
}

.boxbtn2>.el-button {
  margin: 1%;
  width: 30%;
}

.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}

.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}
</style>
